<template>
  <div class="container">
    <!-- 标题 -->
    <div class="title">
      <h2>地产详情</h2>
    </div>
    <div class="estateDetail_info">
      <!-- 标题 -->
      <div class="estateDetail_title">
        <h3>{{ brokerDetail.title }}</h3>
      </div>
      <!-- 图片 -->
      <div class="estateDetail_img">
        <div class="left">
          <img :src="brokerDetail.image" alt="" />
        </div>
        <div class="right">
          <!-- 详情图 -->
          <div class="detail_img">
            <div class="img">
              <img
                :src="item1"
                alt=""
                v-for="item1 in brokerDetail.photos"
                :key="item1"
              />
            </div>
            <div class="detail_price">￥{{ brokerDetail.price }}元</div>
          </div>
          <!-- 地图 -->
          <div class="detail_map" id="Amap">
            <div class="map_">
              <el-amap
                ref="map"
                vid="amapDemo"
                :center="center"
                :zoom="zoom"
                class="amap-demo"
                :mapStyle="mapStyle"
              >
                <!--mapStyle:地图样式-->
                <!-- 地图中的标记点-->
                <el-amap-circle-marker
                  v-for="(marker, index) in markers"
                  :key="index"
                  :center="marker.center"
                  :radius="marker.radius"
                  :fill-color="marker.fillColor"
                  :fill-opacity="marker.fillOpacity"
                  :events="marker.events"
                ></el-amap-circle-marker>
              </el-amap>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="estateDetail_info_content" v-html="brokerDetail.content">
        <p>
          不再漂泊，不再无依靠，你也可以在秦皇岛拥有一个港湾，一间 私人酒店，
          置业维多利亚海湾公寓，是你商场奋斗的避风港，是你人生辉煌
          的里程碑，是你放松身心的家！一米阳光。符合您的主题，温馨、阳光。一也体现出单个的意思。再好不过了
        </p>
        <!-- <p>
          都市核心 光点上的亮点 梦想空间 成就生活理想 理性户型 抒写适用主义
          前卫设计 标榜未来领域 科技建筑 经典现代风格 理性与梦想寸步不离
          挑高空间的奢侈决不是浪费 在理性的梦想中生活 小巧户型的节约决不是吝啬
          追求只与自己有关的
        </p>
        <p>
          不再漂泊，不再无依靠，你也可以在秦皇岛拥有一个港湾，一间 私人酒店，
          置业维多利亚海湾公寓，是你商场奋斗的避风港，是你人生辉煌
          的里程碑，是你放松身心的家！项目名为：都市理想。思索着 创造着 惊艳着
          理性着 寻找着 房子小了 梦想近了 美好着 生活着 户型小了 空间大了
        </p>
        <p>
          不再漂泊，不再无依靠，你也可以在秦皇岛拥有一个港湾，一间 私人酒店，
          置业维多利亚海湾公寓，是你商场奋斗的避风港，是你人生辉煌
          的里程碑，是你放松身心的家！高富帅的选择，白富美的追求逆天之作，创世盛典，只为有准备的人
        </p>
        <p>
          不再漂泊，不再无依靠，你也可以在秦皇岛拥有一个港湾，一间 私人酒店，
          置业维多利亚海湾公寓，是你商场奋斗的避风港，是你人生辉煌
          的里程碑，是你放松身心的家！项目名为：都市理想。思索着 创造着 惊艳着
          理性着 寻找着 房子小了 梦想近了 美好着 生活着 户型小了 空间大了
        </p>
        <p>
          不再漂泊，不再无依靠，你也可以在秦皇岛拥有一个港湾，一间 私人酒店，
          置业维多利亚海湾公寓，是你商场奋斗的避风港，是你人生辉煌
          的里程碑，是你放松身心的家！高富帅的选择，白富美的追求逆天之作，创世盛典，只为有准备的人
        </p> -->
      </div>
    </div>
  </div>
</template>


<script>
import { getProperties } from "@/api/index";
export default {
  data() {
    return {
      brokerDetail: "",
      //接收路由传来的id
      id: this.$route.query.id,
      zoom: 18, //缩放
      center: [113.427963, 23.129465], //地图定位
      mapStyle: "amap://styles/normal",
      //标记点参数集合
      markers: [
        {
          center: [103.941762, 30.765781], //标点位置
          radius: 12,
          fillOpacity: 1,
          fillColor: "rgba(237,150,134,1)",
          //标点点击事件
          events: {
            click: () => {
              console.log("Hello aMap");
            },
          },
        },
      ],
    };
  },
  created() {
    //获取当前房产详细信息
    this.getProperties();
  },
  methods: {
    async getProperties() {
      const { data } = await getProperties({ id: this.id });
      this.brokerDetail = data[0];
      console.log(this.brokerDetail);
    },
  },
};
</script>


<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  // background-color: skyblue;
  padding: 40px 20px;
}

.estateDetail_info {
  padding: 20px 0 0 0;
}

.estateDetail_title {
  margin-top: 20px;
  margin-bottom: 10px;
}

.estateDetail_img {
  height: 600px;
  display: flex;
  .left {
    flex: 3;

    img {
      height: 100%;
    }
  }
  .right {
    height: 500px;
    flex: 1;

    .detail_img {
      height: 300px;
      // background-color: skyblue;
      .img {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        img {
          width: 30%;
          margin-bottom: 15px;
        }
      }
      .detail_price {
        text-align: center;
        font-size: 24px;
        color: #eea83c;
        font-weight: 700;
      }
    }
    .detail_map {
      height: 300px;
      // background-color: aquamarine;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding: 0 10px;
      .map_ {
        width: 300px;
        height: 200px;
        // background-color: red;
      }
      img {
        height: 80%;
      }
    }
  }
}

.estateDetail_info_content {
  margin-top: 20px;
  p {
    line-height: 2;
    margin-bottom: 10px;
  }
}
</style>